import { useState } from 'react';
import { getData2 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid } from '@grapecity/wijmo.react.grid';
import { format } from "@grapecity/wijmo";
import { Radio } from "antd";

const WijmoG01 = () => {
    const InitData = useReactive({
        init: null,
        currentSelection: null,
        currentComboText: 2
    })

    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })

    const init = (init) => {
        InitData.init = init
        init.onSelectionChanged(null);
    }

    const onChange = () => {
        InitData.currentSelection = format("({row},{col})-({row2},{col2})", InitData.init.selection)
    }

    const onRadio = (e) => {
        InitData.currentComboText = e.target.value
        InitData.init.selectionMode = e.target.value
    }

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid alternatingRowStep={0} itemsSource={Data} initialized={init} selectionChanged={onChange} />
                <div>点前选中 : {InitData.currentSelection}</div>
                <Radio.Group onChange={onRadio} defaultValue={InitData.currentComboText}>
                    <Radio.Button value={0}>禁用</Radio.Button>
                    <Radio.Button value={1}>单元格</Radio.Button>
                    <Radio.Button value={2}>多单元格</Radio.Button>
                    <Radio.Button value={3}>单行</Radio.Button>
                    <Radio.Button value={4}>连续多行</Radio.Button>
                    <Radio.Button value={5}>多行(ctrl + click)</Radio.Button>
                </Radio.Group>
            </div>
        )
    }

};

export default WijmoG01